<template>
  <div class="container">
    <!-- 左边 -->
    <div class="container-left">
      <!-- 热门榜单 -->
      <div class="rank-sidebar">
        <h3>
          <a href="javascript:;" title="热门榜单" class="hot-ranking-title">
            热门榜单
          </a>
          <!-- <i class="iconfont icon-arrow-down arrow-down"></i> -->
          <i class="arrow-down"></i>
          <i class="arrow-up"></i>
        </h3>
        <ul>
          <li class="hot-rank-list" v-for="rank in hotRankList" :key="rank.id">
            <a href="http://localhost:8080/RankList" title="酷狗飙升榜">
              <span>
                <img src="./images/20130807185439172736.png" />
              </span>
              {{ rank.rankname }}
            </a>
          </li>
          <!-- <li class="hot-rank-list">
            <a href="" title="酷狗TOP500">
              <span>
                <img src="./images/20130807185450567609.png" />
              </span>
              酷狗TOP500
            </a>
          </li>
          <li class="hot-rank-list">
            <a href="" title="蜂鸟流行音乐榜">
              <span>
                <img
                  src="./images/20220616161505213395.jpg"
                  class="popular_ranking"
                />
              </span>
              蜂鸟流行音乐榜
            </a>
          </li> -->
        </ul>
      </div>
      <!-- 特色音乐榜 -->
      <!-- <div class="rank-sidebar">
        <h3 class="wrap-header">
          <a href="javascript:;" title="特色音乐榜" class="hot-ranking-title">
            特色音乐榜
          </a>
          <i class="iconfont icon-arrow-down"></i>
        </h3>
        <ul>
          <li class="hot-rank-list">
            <a href="" title="酷狗分享榜">
              <span>
                <img src="./images/20131025103853305845.png" />
              </span>
              酷狗分享榜
            </a>
          </li>
          <li class="hot-rank-list">
            <a href="" title="ACG新歌榜">
              <span>
                <img src="./images/20180712154428939457.jpg" />
              </span>
              ACG新歌榜
            </a>
          </li>
          <li class="hot-rank-list">
            <a href="" title="电音热歌榜">
              <span>
                <img src="./images/20201026180913877597.jpg" />
              </span>
              电音热歌榜
            </a>
          </li>
        </ul>
      </div> -->
      <!-- 全球榜 -->
      <!-- <div class="rank-sidebar">
        <h3 class="wrap-header">
          <a href="javascript:;" title="全球榜" class="hot-ranking-title"
            >全球榜</a
          >
          <i class="iconfont icon-arrow-down"></i>
        </h3>
        <ul>
          <li class="hot-rank-list">
            <a href="" title="美国BillBoard榜">
              <span>
                <img src="./images/20130807192258314669.png" />
              </span>
              美国BillBoard榜
            </a>
          </li>
          <li class="hot-rank-list">
            <a href="" title="英国单曲榜">
              <span>
                <img src="./images/20161013180833243081.png" />
              </span>
              英国单曲榜
            </a>
          </li>
          <li class="hot-rank-list">
            <a href="" title="蜂鸟流行音乐榜">
              <span>
                <img src="./images/20151222142442217161.png" />
              </span>
              蜂鸟流行音乐榜
            </a>
          </li>
        </ul>
      </div> -->
    </div>
    <!-- 右边 -->
    <div class="container-right">
      <!-- 酷狗分享榜 -->
      <div class="rank-header">
        <h3 class="rank-list">酷狗飙升榜</h3>
        <div class="rank-update">2022-11-12 更新</div>
        <a href="javascript:;" class="play-btn" @click="jump('/home')">
          <span class="play">
            <!-- <i class="iconfont icon-triangle play-logo"></i> -->
            <i></i>
            <span class="play-all">播放全部</span>
          </span>
        </a>
      </div>
      <!-- 歌单列表 -->
      <div class="middle">
        <div class="song-head">
          <input type="checkbox" class="select-all" />
          <!-- <span class="select-all"></span> -->
          <span>全选</span>
        </div>
        <div class="song-list-wrap">
          <div class="song-list">
            <ul>
              <li v-for="song in songinfo" :key="song.name">
                <input type="checkbox" class="song-list-check" />
                <span class="song-list-num">1</span>
                <span class="song-list-icon"></span>
                <!-- <i class="song-list-icon"></i> -->
                <a href="javascript:;" class="song-name-wrap">
                  <span class="song-name">{{ song.name }}</span>
                  <span> - {{ song.author }}</span>
                </a>
                <span class="song-tips">
                  <a href="" class="icon-triangle"> </a>
                  <a href="" class="icon-download"> </a>
                  <a href="" class="icon-share"> </a>
                  <span class="song-tips-item-time">4:47</span>
                </span>
              </li>
            </ul>
          </div>
        </div>
        <!-- <div class="song-list-wrap">
          <div class="song-list">
            <ul>
              <li>
                <input type="checkbox" class="song-list-check" />
                <span class="song-list-num">1</span>
                <span class="iconfont icon-new song-list-icon"></span>
                <span class="song-list-icon"></span>
                <a href="javascript:;" class="song-name-wrap">
                  <span class="song-name">开往早晨的午夜</span>
                  <span> - 张碧晨</span>
                </a>
                <span class="song-tips">
                  <a href="">
                    <span class="iconfont icon-triangle"></span>
                  </a>
                  <a href="">
                    <span class="iconfont icon-download"></span>
                  </a>
                  <a href="">
                    <span class="iconfont icon-fenxiang1"></span>
                  </a>
                  <span class="song-tips-item-time">4:47</span>
                </span>
              </li>
            </ul>
          </div>
        </div> -->
        <!-- <div class="song-list-wrap">
          <div class="song-list">
            <ul>
              <li>
                <input type="checkbox" class="song-list-check" />
                <span class="song-list-num">1</span>
                <span class="iconfont icon-new song-list-icon"></span>
                <a href="javascript:;" class="song-name-wrap">
                  <span class="song-name">开往早晨的午夜</span>
                  <span> - 张碧晨</span>
                </a>
                <span class="song-tips">
                  <a href="">
                    <span class="iconfont icon-triangle"></span>
                  </a>
                  <a href="">
                    <span class="iconfont icon-download"></span>
                  </a>
                  <a href="">
                    <span class="iconfont icon-fenxiang1"></span>
                  </a>
                  <span class="song-tips-item-time">4:47</span>
                </span>
              </li>
            </ul>
          </div>
        </div> -->
        <!-- <div class="song-list-wrap">
          <div class="song-list">
            <ul>
              <li>
                <input type="checkbox" class="song-list-check" />
                <span class="song-list-num">1</span>
                <span class="iconfont icon-new song-list-icon"></span>
                <a href="javascript:;" class="song-name-wrap">
                  <span class="song-name">开往早晨的午夜</span>
                  <span> - 张碧晨</span>
                </a>
                <span class="song-tips">
                  <a href="">
                    <span class="iconfont icon-triangle"></span>
                  </a>
                  <a href="">
                    <span class="iconfont icon-download"></span>
                  </a>
                  <a href="">
                    <span class="iconfont icon-fenxiang1"></span>
                  </a>
                  <span class="song-tips-item-time">4:47</span>
                </span>
              </li>
            </ul>
          </div>
        </div> -->
        <!-- <div class="song-list-wrap">
          <div class="song-list">
            <ul>
              <li>
                <input type="checkbox" class="song-list-check" />
                <span class="song-list-num">1</span>
                <span class="iconfont icon-new song-list-icon"></span>
                <a href="javascript:;" class="song-name-wrap">
                  <span class="song-name">开往早晨的午夜</span>
                  <span> - 张碧晨</span>
                </a>
                <span class="song-tips">
                  <a href="">
                    <span class="iconfont icon-triangle"></span>
                  </a>
                  <a href="">
                    <span class="iconfont icon-download"></span>
                  </a>
                  <a href="">
                    <span class="iconfont icon-fenxiang1"></span>
                  </a>
                  <span class="song-tips-item-time">4:47</span>
                </span>
              </li>
            </ul>
          </div>
        </div> -->
      </div>
      <!-- footer部分 -->
      <div class="footer">
        <div class="check-more">查看更多内容，请下载客户端</div>
        <span>
          <a href="javascript:;" class="download">立即下载</a>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { getRankList } from "@/api/index";
export default {
  name: "RankingList",
  async mounted() {
    const result = await getRankList();
    this.hotRankList = result.rank.list.slice(0, 11);
    this.songinfo = result.rank.list[0].songinfo;
  },
  data() {
    return {
      index: 0,
      hotRankList: [],
      songinfo: [],
    };
  },
  methods: {
    // 全部播放跳转页面
    jump(url) {
      this.$router.push(url);
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 0 12px 0 20px;
  width: 1000px;
  height: 1458px;
}
.container-left {
  border: 1px solid #eee;
  width: 218px;
  height: 1456px;
}
.rank-sidebar {
  height: 45px;
  border-bottom: 1px solid #eee;
}
.rank-sidebar a:hover {
  text-decoration: none;
  color: #555 !important;
}
.rank-sidebar ul {
  display: block;
  overflow: hidden;
  margin-top: 6px;
}
.rank-sidebar i {
  background: url(./images/sprite.png);
  top: 20px;
  text-align: right;
  background-position: -480px -120px;
}
.hot-ranking-title {
  padding-left: 15px;
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  font-family: "微软雅黑";
  font-weight: 400;
  color: #555;
  text-decoration: none;
}
.hot-rank-list {
  margin-bottom: 4px;
  padding-left: 15px;
  width: 203px;
  height: 36px;
}
.hot-rank-list:hover {
  background-color: #169af3;
}
.rank-sidebar li a {
  margin-bottom: 4px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  display: block;
  position: relative;
  cursor: pointer;
}
.rank-sidebar li a span {
  width: 16px;
  height: 16px;
  margin: 11px 0 0 0;
}
.rank-sidebar li a img {
  vertical-align: middle;
}
.arrow-down {
  height: 5px;
  line-height: 5px;
  padding-left: 9px;
}
.popular_ranking {
  width: 16px;
  height: 16px;
}
.container-right {
  position: relative;
  width: 750px;
  height: 1443px;
  padding-left: 30px;
  margin-top: 15px;
}
.container .rank-header {
  display: flex;
  width: 750px;
  height: 57px;
  align-items: center;
  border-bottom: 1px dotted #cacaca;
  margin-bottom: 24px;
}
.rank-list {
  margin: 0 20px 33px 0;
  width: 120px;
  height: 24px;
  font-size: 24px;
  font-family: "微软雅黑";
  font-weight: 400;
  color: #333;
}
.rank-update {
  font-size: 14px;
  height: 21px;
  color: #999;
  margin-top: -20px;
}
.rank-header a {
  width: 112px;
  height: 34px;
  margin-top: -34px;
}
.rank-header a:hover {
  color: #fff !important;
  text-decoration: none;
}
.play-btn {
  line-height: 34px;
  text-align: center;
  position: absolute;
  right: 0;
  color: #fff;
  background-color: #169af3;
  text-decoration: none;
  border: 1px solid #dbdbdb;
  border-radius: 2px;
}
.play i {
  background: url(./images/sprite.png);
  padding-left: 9px;
  height: 12px;
  background-position: -570px -90px;
  left: 8px;
  top: 50%;
}
.play-btn span {
  height: 14px;
  border: 10x solid #dbdbdb;
}
.play-btn .play-logo {
  height: 16px;
}
.play-all {
  font-size: 14px;
  font-family: "微软雅黑";
  margin-left: 10px;
}
.song-head {
  font-size: 14px;
  color: #999;
  padding-bottom: 10px;
  position: relative;
}
.song-head > span:first-child {
  padding-left: 14px;
  height: 14px;
  background-position: -180px -180px;
}
.song-head .select-all {
  margin: 0 10px;
  width: 14px;
  height: 14px;
  cursor: pointer;
  color: #999;
}
.song-list-wrap {
  display: flex;
}
.song-list ul li {
  width: 730px;
  height: 54px;
  line-height: 54px;
  padding: 0 10px;
  cursor: pointer;
  border-bottom: 1px solid #f2f2f2;
}
.song-list ul li:hover {
  background-color: #f5f8fb;
  visibility: visible;
}
.song-list-check {
  margin-right: 10px;
  width: 14px;
  height: 14px;
  color: #999;
}
.song-list .song-list-num {
  font-size: 18px;
  font-family: Tahoma;
  color: #fe2c62;
  font-weight: 400;
  margin-right: 10px;
}

.song-list a:hover {
  text-decoration: none;
  color: #c4a699 !important;
}
.song-list-icon {
  padding-left: 17px;
  margin-right: 10px;
  background: url(./images/sprite.png);
  background-position: -240px -236px;
}
.song-name-wrap {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-right: 10px;
}
.song-name-wrap .song-name:hover {
  color: #009af3 !important;
}
.song-tips {
  right: 10px;
  top: 0;
  /* float: right; */
  padding-top: 6px;

  line-height: 54px;
}
.icon-triangle {
  background: url(./images/sprite.png);
  padding-left: 12px;
  height: 14px;
  background-position: 0 0;
  margin-left: 10px;
  visibility: hidden;
}
.icon-download {
  background: url(./images/sprite.png);
  padding-left: 16px;
  height: 13px;
  background-position: -90px 0;
  margin-left: 10px;
  visibility: hidden;
}
.icon-share {
  background: url(./images/sprite.png);
  padding-left: 16px;
  height: 14px;
  background-position: -298px 0;
  margin-left: 10px;
  visibility: hidden;
}
.song-tips .song-tips-item-time {
  width: 28px;
  height: 15px;
  margin: -2px 0 0 20px;
  color: #999;
  font-size: 14px;
}
.song-tips .song-tips-item-time:hover {
  color: #009af3;
}
.footer {
  display: flex;
  width: 750px;
  height: 120px;
  justify-content: center;
  align-items: center;
}
.footer .check-more {
  font-size: 16px;
  color: #666;
}
.footer span {
  width: 108px;
  height: 36px;
  line-height: 36px;
  margin-left: 20px;
  border-radius: 3px;
  background-color: #169af3;
}
.footer span:hover {
  background-color: #158fe1;
}
.footer .download {
  vertical-align: middle;
  color: #fff;
  font-size: 16px;
  margin-left: 22px;
}

.footer a:hover {
  text-decoration: none;
  color: #fff !important;
}
</style>
